<template>
	<view class="car">
		<view class="carlist">
			<view>
				<label>
					<u-checkbox-group class="allcheck">
					<u-checkbox v-model="isAllCheck"  @change="checkAll($event)">全选</u-checkbox>
					</u-checkbox-group>
				<!-- <checkbox class="allcheck" value="isAllCheck" >全选</checkbox> -->
				</label>
			</view>
			<view class="caritem" v-for="(item,index) in getShoppingCart" :key="item.id">
				<view class="delete" @tap="deleteItem($event,item.id,item.productID)">
					<image src="../../static/icons/删除.png" mode=""></image>
				</view>
				
				<u-checkbox-group>
				<u-checkbox :value="item.check"  @change="checkChange($event,index)"></u-checkbox>
				</u-checkbox-group>
			<!-- 	<checkbox value="item.check" @change="checkChange($event,index)"></checkbox> -->
				<view class="catImg">
					<image class="Img" :src="`http://192.168.0.103:3000/`+ item.productImg"></image>
				</view>
				
				<text class="name">{{item.productName}}</text>
				<view class="car_price">
					<text>{{item.price}}</text>元
				</view>
				<view class="num">
					<u-number-box :min="1" :max="item.maxNum" :value="item.num"
                @change="handleChange($event,index,item.productID)"></u-number-box>
					<!-- <button class="btn">+</button>
					<text>{{item.num}}</text>
					<button class="btn">-</button> -->
				</view>
				<view class="car_price-sum">
					<text>{{item.price*item.num}}</text>元
				</view>
				
			</view>
		</view>
		<view class="bottom">
			<view class="sun_num">
				 <text class="cart-total-num">{{getNum}}</text> 件商品，已选择
				<text class="cart-total-num">{{getCheckNum}}</text> 件
			</view>
			<view class="sun_price">
				<text class="total-price-title">合计：</text>
				<text class="total-price">{{getTotalPrice}}元</text>
			</view>
			<view class="tobuy">
				<button>立即付款</button>
			</view>
		</view>
		

	</view>
</template>

<script>
	import {mapActions} from "vuex";
	import {mapGetters} from "vuex";
	export default {
		data() {
			return {

			}
		},
		onLoad() {
		},
		methods: {
		    ...mapActions(["updateShoppingCart", "deleteShoppingCart", "checkAll"]),
		    // 修改商品数量的时候调用该函数
		    handleChange(currentValue, key, productID) {
				console.log(currentValue.value,key,productID)
		      // 当修改数量时，默认勾选
		      this.updateShoppingCart({ key: key, prop: "check", val: true });
		      // 向后端发起更新购物车的数据库信息请求
		      this.$request
		        .post("/user/shoppingCart/updateShoppingCart", {
		          user_id: this.$store.getters.getUser.user_id,
		          product_id: productID,
		          num: currentValue.value
		        })
		        .then(res => {
		          switch (res.data.code) {
		            case "001":
		              // “001”代表更新成功
		              // 更新vuex状态
		              this.updateShoppingCart({
		                key: key,
		                prop: "num",
		                val: currentValue.value
		              });
		              // 提示更新成功信息
					  uni.showToast({
					  	title: res.data.msg,
					  	duration: 1000
					  });
		              break;
		            default:
		              // 提示更新失败信息
					  uni.showToast({
					  	title: res.data.msg,
					  	duration: 1000
					  });
		          }
		        })
		        .catch(err => {
		          return Promise.reject(err);
		        });
		    },
		    checkChange(val, key) {
				console.log(val,key)
		      // 更新vuex中购物车商品是否勾选的状态
		      this.updateShoppingCart({ key: key, prop: "check", val: val });
		
			},
		    // 向后端发起删除购物车的数据库信息请求
		    deleteItem(e, id, productID) {
		      this.$request
		        .post("/user/shoppingCart/deleteShoppingCart", {
		          user_id: this.$store.getters.getUser.user_id,
		          product_id: productID
		        })
		        .then(res => {
		          switch (res.data.code) {
		            case "001":
		              // “001” 删除成功
		              // 更新vuex状态
		              this.deleteShoppingCart(id);
		              // 提示删除成功信息
					  uni.showToast({
					  	title: res.data.msg,
					  	duration: 1000
					  });
		              break;
		            default:
		              // 提示删除失败信息
		              uni.showToast({
		              	title: res.data.msg,
		              	duration: 1000
		              });
		          }
		        })
		        .catch(err => {
		          return Promise.reject(err);
		        });
		    },
			 deleteItem(e, id, productID) {
			      this.$request
			        .post("/user/shoppingCart/deleteShoppingCart", {
			          user_id: this.$store.getters.getUser.user_id,
			          product_id: productID
			        })
			        .then(res => {
			          switch (res.data.code) {
			            case "001":
			              // “001” 删除成功
			              // 更新vuex状态
			              this.deleteShoppingCart(id);
			              // 提示删除成功信息
			              uni.showToast({
			              	title: res.data.msg,
			              	duration: 1000
			              });
			              break;
			            default:
			              // 提示删除失败信息
			             uni.showToast({
			             	title: res.data.msg,
			             	duration: 1000
			             });
			          }
			        })
			        .catch(err => {
			          return Promise.reject(err);
			        });
			    }
		},
		computed: {
			...mapGetters([
				"getShoppingCart",
				"getCheckNum",
				"getTotalPrice",
				"getNum",
				"getIsAllCheck"
			]),
			isAllCheck: {
				get() {
					return this.$store.getters.getIsAllCheck;
				},
				set(val) {
					this.checkAll(val);
				}
			}
		}
	}
</script>

<style scoped>
	.car {
         width: 100%;
		 height: auto;
		background-color: #f1f2f3;
		padding-bottom: 240rpx;

	}
	.delete image{
		position: absolute;
		bottom: 7%;
		width: 10%;
		height: 10%;
		right: 0;
	}
	.allcheck{
		padding: 20rpx;
	}
	.caritem{
		position: relative;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
		height: 200rpx;
		background-color: #fff;
		border-radius: 4%;
		margin-top: 4%;
		border: 1 solid #f1f2f3;
	}
	.catImg{
		position: relative;
		/* margin-left: 15%; */
		width: 30%;
		height: 100%;
		overflow: hidden;
	}
/* 	.Img{
		position: relative;
		height: 100%;
		 
	} */
	image{
		position: absolute;
		height: 100%;
	}
/deep/	uni-image>div, uni-image>img{
		width: 35%;
	}
	.name{
		position: absolute;
		top: 6%;
		left: 50%;
		margin-left: 15rpx;
	}
	.num{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.car_price-sum{
		color: #fbc31f;
	}
	.car_price{
		/* margin-left: -10%; */
	}
	.num  button{
		border: 0;
		background-color: #fff;
	}
/deep/ uni-button:after{
	border: 0;
}
.bottom{
	width: 100%;
	height: 10%;
	position: fixed;
	background-color: #fff;
	bottom: 94rpx;
}
.bottom{
	display: flex;
	justify-content: space-around;
	align-items: center;
}
.tobuy button{
	background-color: #1aa034;
}
</style>
